<template>
  <div class="order">
    <div class="ordertop">
      <el-input v-model="num" placeholder="请输入订单编号" class="input-with-select">
      </el-input>
      <el-button class="left20" @click="selectone()" type="primary">搜索</el-button>
      <el-button @click="save" type="primary">导出表格</el-button>
    </div>
    <div class="ordercenter">
      <el-table :data="orderlist" height="500" border style="width: 100%">
        <el-table-column label="订单ID">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.orderid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单编号">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.ordernumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品详情" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.untitled }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" width="110">
          <template slot-scope="scope">
            <el-button :type="scope.row.status == 0 ? 'info' : 'success'">{{ scope.row.status == 0 ? '未支付' : '已完成'
            }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="实付金额（元）" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.totalfee }}</span>
          </template>
        </el-table-column>
        <el-table-column label="收货地址" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.addr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单信息（备注）" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.orderinfo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" @click="tabledel(scope.row.orderid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="orderbottom">
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
          :page-sizes="[5, 10, 20, 50, 100]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
          :total="totallist.length">
        </el-pagination>
      </div>
    </div>
    <el-dialog style="text-align: left;" title="删除" :visible.sync="dialogVisible" width="30%">
      <span>删除后不可恢复</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogdel">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Orders } from '../../api'
import { saveExcel } from "@/utils/toExl"
export default {
  data() {
    return {
      sta: '',
      totallist: [],
      orderlist: [],
      dialogVisible: false,
      orderid: '',
      ordernumber: '',
      num: '',
      currentPage4: 1,
      limit: 5
    }
  },
  methods: {
    //导出表格
    save() {
      var option = {};
      option.fileName = "订单excel";
      option.datas = [
        {
          //第一个sheet
          sheetData: this.totallist.map((item, index) => {
            item.order = index + 1;
            return item;
          }),
          sheetName: "订单表",
          sheetFilter: ["order", "orderid", "ordernumber", "untitled", "status", "totalfee", "addr", "orderinfo", "time"],
          sheetHeader: ["序号", "订单id", "订单编号", "商品详情", "订单状态(0：未支付；1：已完成)", "实付金额", "收货地址", "订单信息（备注）", "创建时间"],
        },
      ];
      saveExcel(option);
    },
    //获取订单列表数据
    async getlist() {
      if (JSON.parse(sessionStorage.getItem('Vuex-Persistence'))) {
        let res = await Orders['getlist']()
        // console.log(res, '订单列表');
        this.totallist = res.data
      }
    },
    //删除订单
    async del() {
      let res = await Orders['del'](this.orderid)
      // console.log(res, '删除订单');
      this.fenye()
    },
    tabledel(item) {
      this.dialogVisible = true
      this.orderid = item
    },
    dialogdel() {
      // console.log(this.orderid, 'orderid');
      this.del()
      this.dialogVisible = false
      this.getlist()
      this.fenye()
    },
    //查找订单列表数据
    async selecta() {
      let res = await Orders['select'](this.num)
      // console.log(res, '查找列表');
      this.orderlist = res.data
    },
    selectone() {
      if (JSON.parse(sessionStorage.getItem('Vuex-Persistence'))) {
        if (this.num) {
          this.selecta()
        } else {
          this.fenye()
        }
      }
    },
    //分页接口
    async fenye() {
      if (JSON.parse(sessionStorage.getItem('Vuex-Persistence'))) {
        let res = await Orders['fenye'](this.currentPage4, this.limit)
        // console.log(res, '分页数据');
        this.orderlist = res.data
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.limit = val
      this.currentPage4 = 1
      this.fenye()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage4 = val
      this.fenye()
    }
  },
  mounted() {
    this.getlist()
    this.fenye()
  }
}
</script>

<style scoped lang="scss">
.order {
  overflow: hidden;
  background: #fff;
}

.ordertop {
  margin: 20px 0;
}

.left20 {
  margin: 0 10px;
}

.input-with-select {
  width: 800px;
}

.ordercenter {
  padding: 0 5px;
}

.orderbottom {
  margin-top: 10px;
}
</style>